<!-- 
  工艺工时模块页面（选项卡布局）
 -->
<template>
      <layout>
        <template slot="operation">
       
          <div class="operation-left">
            <div class="breadcrumb">
             <el-breadcrumb separator-class="el-icon-arrow-right" >
          <el-breadcrumb-item  >工艺工时设计</el-breadcrumb-item>
          <el-breadcrumb-item>产品通知</el-breadcrumb-item>
        </el-breadcrumb>
            </div>
            <div class="notice-box">
              <template v-for="notice in noticeList">
                <div class="notice-item" :key="notice.noticeNumber">
                  <div class="total">
                    <div class="total_title" @click="showNoticeDetail(notice)">
                      <el-progress type="dashboard" :percentage="notice.percent" color="#1989fa" class="mt20"></el-progress>
                      <p class="text">{{ notice.noticeNumber }}</p>
                      <p class="text">{{ notice.orderUnit }}</p>
                      <p class="text">{{ notice.workingNumber }}</p>
                    </div>
                  </div>
                </div>
              </template>
            </div>
          </div>
        </template>
        <template slot="content">
          <div class="h-100percent" v-if="!isEmpty(noticeInfo)">
            <!-- <el-form class="bg-white p-10h-90percent"> -->
            <el-row class="mb10">
              <!-- <el-form-item label="基础信息" class="w-100percent bold bg-white mb10"> -->
              <label>基础信息</label>
              <div class="ml10 inline-label mr10 fontSize12">{{ noticeInfo.noticeNumber || '通知单号' }}</div>
              <div class="inline-label fontSize12">{{ noticeInfo.orderUnit || '订货单位' }}</div>
              <!-- </el-form-item> -->
            </el-row>

            <el-table border stripe :data="noticeDetail" row-key="id" @row-dblclick="firstDoubleClick">
              <el-table-column type="index" label="序号" align="left" width="70"></el-table-column>
              <el-table-column prop="drawingNumber" label="图号" align="left" width="100"></el-table-column>
              <el-table-column prop="productName" label="品名" align="left" width="150"></el-table-column>
              <el-table-column prop="materialQuality" label="材质" align="left" width="100"></el-table-column>
              <el-table-column prop="number" label="数量" sortable align="left" width="100"></el-table-column>
              <el-table-column prop="deliveryDate" label="交货日期" sortable align="left" width="120"></el-table-column>
              <el-table-column prop="state" label="状态" align="left" width="180"></el-table-column>
              <el-table-column prop="remark" label="备注" align="left" min-width="100"></el-table-column>
              <el-table-column prop="state" label="设计工艺表" align="left" fixed="right" width="120" v-if="$checkAuth('工艺路线投产提交')">
                <template slot-scope="scope">
                  <el-button size="mini" type="primary" @click="onClickDesign(scope.row, '产品通知')" :disabled="!canDesignState.includes(scope.row.state)">设计</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- </el-form> -->
          </div>
        </template>
        <dialog-detail ref="dialog"></dialog-detail>
    <process-review ref="first" @first-review="reviewProcess"></process-review>
    <tech-review ref="five" @five-review="onReview"></tech-review>
    <six ref="addFirstDialog" @update="queryProcessVersion()"></six>
    <six-add ref="sixadd" @update="queryProcessVersion()"></six-add>
    <design-dialog ref="designDialog" @update="onUpdateDesignData"></design-dialog>
      </layout>
    <!-- <dialog-detail ref="dialog"></dialog-detail>
    <process-review ref="first" @first-review="reviewProcess"></process-review>
    <tech-review ref="five" @five-review="onReview"></tech-review>
    <six ref="addFirstDialog" @update="queryProcessVersion()"></six>
    <six-add ref="sixadd" @update="queryProcessVersion()"></six-add>
    <design-dialog ref="designDialog" @update="onUpdateDesignData"></design-dialog> -->
 
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { State, namespace } from 'vuex-class'
import Layout from '@/views/_common/Layout.vue'
import DialogDetail from './DialogDetail.vue'
import ProcessReview from './processReview.vue'
import TechReview from '../process-route/technical_review_dialog.vue'
import Six from './addProcessDialog.vue'
import SixAdd from './addProcessDetailDialog.vue'
import DesignDialog from './designProcess.vue'
import _ from 'lodash'

const vuexLogin = namespace('Login')
const vuexProcess = namespace('TwoProcess')
const vuexNotice = namespace('NewNotice')
const vuexEnter = namespace('TwoEnter')
const vuexReview = namespace('TwoReview')
const vuexTool = namespace('OneTool')

@Component({
  components: {
    Layout,
    DialogDetail,
    ProcessReview,
    TechReview,
    SixAdd,
    Six,
    DesignDialog
  }
})
export default class Index extends Vue {
  public $refs!: {
    dialog: any
    first: any
    third: any
    four: any
    five: any
    addFirstDialog: any
    sixadd: any
    designDialog: any
  }
  //权限按钮
  @vuexLogin.State positionName: any
  @vuexLogin.State DesignReviewShow: any

  /* ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== */
  /* ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== */
  /* ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== */
  /* ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== begin ===== */

  /*************************
   ***** 生命周期函数 *****
   *************************/
  created() {
    // this.GET_REWORK_LIST({ ...this.threeSearch }) //返修

    // this.GET_REVIEW_LIST({ ...this.reviewSearch }) //技术评审
    
    this.GET_PROCESS_NOTICE() //产品通知
    this.noticeInfo = {}
    this.noticeDetail = []
    // 产品通知模块要什么首页查询 ^_^？？？
    // this.GET_PROCESS_INDEX({ ...this.queryProductionFilters }) //首页查询
  }

  /*************************
   ***** 工艺审批选项卡 *****
   *************************/

  auditButtonDisabled: boolean = true // 审核按钮是否置灰
  auditProduction: any = {} // 选中的待审核产品记录
  // auditProductingId: number = 0 // 选中的待审核产品记录ID
  stateList: String[] = ['生产通知审批', '工艺设计', '工艺审批', '待派工', '生产中', '已完成', '生产通知变更', '工艺变更设计', '工艺变更审批']
  canAudit: any[] = ['工艺审批', '工艺变更审批']
  // 工艺审批页面查询条件
  queryProductionFilters: any = {
    drawingNumber: '',
    productName: '',
    noticeNumber: '',
    state: '工艺审批',
    type: '',
    page: 1,
    pageSize: 20
  }

  /**
   * 工艺审批页面查询产品记录
   */
  queryProduction() {
    this.GET_PROCESS_INDEX({ ...this.queryProductionFilters })
  }

  /**
   * 工艺审批页面表格（行）选择
   * 选中一行产品，且产品状态为“待审核”，按钮显示
   */
  // processAuditSelection(auditProduction: any) {
  //   if (auditProduction.length == 1 && auditProduction[0].state == '工艺审批') {
  //     this.auditButtonDisabled = false
  //     this.auditProduction = auditProduction[0]
  //     this.auditProductingId = auditProduction[0].producingId
  //   } else {
  //     this.auditButtonDisabled = true
  //     this.auditProductingId = 0
  //   }
  // }

  /*************************
   ***** 产品通知选项卡 *****
   *************************/

  // 生产通知信息
  noticeInfo: any = {} // {noticeNumber: xxx, orderUnit: xxx}

  // 生产通知详情（产品列表）
  noticeDetail: any[] = []
  canDesignState: any[] = ['工艺设计', '待派工', '生产中', '工艺设计变更'] // 可以变更设计的产品状态
  thisNoticeId: any = ''
  isEmpty(obj) {
    return _.isEmpty(obj)
  }
  /**
   * 通知单产品详情展示
   */
  showNoticeDetail(data) {
    this.$set(this.noticeInfo, 'noticeNumber', data.noticeNumber)
    this.$set(this.noticeInfo, 'orderUnit', data.orderUnit)
    this.getProductList(data.noticeId)
    this.thisNoticeId = data.noticeId
  }
  async getProductList(noticeId) {
    let result = await this.GET_NOTICE_DETAIL({ noticeId: noticeId })
    if (result) {
      this.noticeDetail = this.productList
      this.s1 = 's' // TODO 没搞明白这个样式绑定
    }
  }

  /*************************
   ***** 工装产品选项卡 *****
   *************************/

  @vuexTool.State toolProductList: any
  @vuexTool.Action GET_TOOL_LIST: any

  // 工装产品记录查询条件
  queryToolingProductFilters: any = {
    drawingNumber: '',
    productName: '',
    state: '',
    page: 1,
    pageSize: 1000
  }

  /**
   * 查询工装产品列表
   */
  queryToolingProduct() {
    this.GET_TOOL_LIST({ ...this.queryToolingProductFilters })
  }

  /*****************************
   ***** 产品工艺库选项卡 *****
   *****************************/

  // 工艺版本查询条件
  queryProcessVersionFilters: any = {
    drawingNumber: '',
    page: 1,
    pageSize: 20
  }

  /**
   * 工艺版本查询
   */
  queryProcessVersion() {
    this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
  }

  /* ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== */
  /* ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== */
  /* ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== */
  /* ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== end ===== */

  //设计
  // @vuexProcess.Action DESIGN_PROCESS: any

  // 分页功能
  handleSizeChange(val) {
    this.queryProcessVersionFilters.pageSize = val
    this.queryProcessVersion()
  }
  handleCurrentChange(val) {
    this.queryProcessVersionFilters.page = val
    this.queryProcessVersion()
  }

  // async design(reviewData: any) {
  //   let result = await this.DESIGN_PROCESS(reviewData)
  //   if (result) {
  //     this.$refs.third.close()
  //     //更新表单 不知道是那个设计出来的
  //     this.GET_PROCESS_INDEX({ ...this.queryProductionFilters }) //首页
  //     //   this.GET_REWORK_LIST({ ...this.threeSearch }) //返修
  //     this.GET_TOOL_LIST({ ...this.queryToolingProductFilters }) //工装
  //     this.GET_PROCESS_NOTICE() //产品通知单
  //   }
  // }
  // secondId: number = 0
  // secondSelect: any = {}
  // secondDesign: boolean = true
  // secondSelection(secondSelect: any) {
  //   if (secondSelect.length == 1) {
  //     this.secondId = secondSelect[0].id
  //     this.secondSelect = secondSelect[0]
  //     this.secondDesign = false
  //   } else {
  //     this.secondDesign = true
  //     this.secondId = 0
  //   }
  // }
  // second() {
  //   this.GET_PROCESS_DETAIL({ id: this.secondId })
  //   this.$refs.third.getData(this.secondSelect)
  //   this.$refs.third.open('2', this.secondId)
  // }
  onClickDesign(product, type) {
    // 给通知单产品/工装品/返修品设计工艺表
    this.$refs.designDialog.open(product, product.producingId, type)
  }
  // thirdId: number = 0
  // thirdSelect: any = {}
  // thirdDesign: boolean = true
  // thirdSelection(thirdSelect: any) {
  //   if (thirdSelect.length == 1) {
  //     this.thirdId = thirdSelect[0].id
  //     this.thirdSelect = thirdSelect[0]
  //     this.thirdDesign = false
  //   } else {
  //     this.thirdDesign = true
  //     this.thirdId = 0
  //   }
  // }
  // thirdReview() {
  //   this.GET_PROCESS_DETAIL({ id: this.thirdId })
  //   this.$refs.third.getData(this.thirdSelect)
  //   this.$refs.third.open('3', this.thirdId)
  // }
  // fourId: number = 0
  // fourSelect: any = {}
  // fourDesign: boolean = true
  // fourSelection(fourSelect: any) {
  //   if (fourSelect.length == 1) {
  //     this.fourId = fourSelect[0].id
  //     this.fourSelect = fourSelect[0]
  //     this.fourDesign = false
  //   } else {
  //     this.fourDesign = true
  //     this.fourId = 0
  //   }
  // }

  // four() {
  //   // this.GET_PROCESS_DETAIL({ id: this.fourId })
  //   // this.$refs.third.getData(this.fourSelect)
  //   // this.$refs.third.open('4', this.fourId)
  //   this.$refs.designDialog.open(this.fourSelect, this.fourSelect.producingId)
  // }
  //设计end

  //首页
  //接口
  @vuexProcess.State firstData: any
  @vuexProcess.Action GET_PROCESS_INDEX: any
  @vuexProcess.Action AUDIT_PROCESS: any
  @vuexProcess.Action GET_PROCESS_DETAIL: any

  /*
  firstData: any[] = [
    {
      id: '1',
      state: '待处理'
    },
    {
      id: '2',
      state: '待处理'
    },
    {
      id: '3',
      state: '已处理'
    },
    {
      id: '4',
      state: '已处理'
    },
    {
      id: '5',
      state: '已处理'
    }
  ]
  */
  async onClickAudit(process) {
    // console.log('审核', process);
    let result = await this.GET_PROCESS_DETAIL({ producingId: process.producingId })

    this.$refs.first.getData(process.drawingNumber, process.productName, process.number)
    if (result) {
      this.$refs.first.open(process.producingId)
    }
  }
  // async processReview() {
  //   let result = await this.GET_PROCESS_DETAIL({ producingId: this.auditProductingId })

  //   this.$refs.first.getData(this.auditProduction.drawingNumber, this.auditProduction.name, this.auditProduction.number)
  //   if (result) {
  //     this.$refs.first.open(this.auditProductingId)
  //   }
  // }
  async reviewProcess(reviewData: any) {
    let result = await this.AUDIT_PROCESS(reviewData)
    if (result) {
      this.$refs.first.close()
      this.GET_PROCESS_INDEX({ ...this.queryProductionFilters })
    }
  }

  firstDoubleClick(row) {
    this.getProcessDetail(row.producingId, row.drawingNumber, row.productName, row.number)
  }
  async getProcessDetail(id, drawingNumber, name, number) {
    let result = await this.GET_PROCESS_DETAIL({ producingId: id })
    if (result) {
      this.$refs.dialog.open(true)
      this.$refs.dialog.getData(drawingNumber, name, number)
    }
  }

  //首页end

  //产品通知进入
  @vuexEnter.State noticeList: any
  @vuexEnter.Action GET_PROCESS_NOTICE: any
  @vuexNotice.Action GET_NOTICE_DETAIL: any
  @vuexNotice.State productList: any

  /*
  noticeList: any[] = [
    {
      id: '3',
      noticeNumber: '19-036',
      orderUnit: '东亚里更',
      percent: 70
    },
    {
      id: '4',
      noticeNumber: '19-037',
      orderUnit: '东盟',
      percent: 40
    }
  ]
  */

  //返修处理进入
  @vuexEnter.State thirdData: any
  @vuexEnter.Action GET_REWORK_LIST: any

  threeSearch: any = {
    dispatchFormNumber: '',
    processName: '',
    state: '',
    page: 1,
    pageSize: 20
  }
  threeSubmit() {
    this.GET_REWORK_LIST({ ...this.threeSearch })
  }

  //技术评审
  @vuexReview.State processList: any
  //  @vuexReview.Action COMMIT_TABLE_fiveDATA: any
  @vuexReview.Action GET_REVIEW_LIST: any
  @vuexReview.Action GET_REVIEW_RESULT: any
  @vuexReview.Action COMMIT_REVIEW_RESULT: any

  fiveId: string = '0'
  fiveSelect: any[] = []
  fiveShow: boolean = true

  techReview(rowData) {
    this.GET_REVIEW_RESULT({ id: rowData.id })
    this.$refs.five.getData(rowData.drawingNumber, rowData.name, rowData.number)
    this.$refs.five.open(rowData.id)
  }
  reviewSubmit() {
    this.GET_REVIEW_LIST()
  }
  async onReview(formData: any) {
    let result = await this.COMMIT_REVIEW_RESULT(formData)
    if (result) {
      this.$refs.five.close()
      this.GET_REVIEW_LIST()
    }
  }
  fiveDoubleClick(row) {
    this.GET_REVIEW_RESULT({ id: row.id })
    this.$refs.five.getData(row.drawingNumber, row.name, row.number)
    this.$refs.five.look()
  }
  // fiveSelection(fiveSelect: any) {
  //   if (fiveSelect.length == 1) {
  //     this.fiveId = fiveSelect[0].id
  //     this.fiveShow = false
  //   } else {
  //     this.fiveShow = true
  //     this.fiveId = ''
  //   }
  //   this.fiveSelect = fiveSelect
  // }
  //技术评审end

  //工艺版本库
  @vuexProcess.State sixData: any
  @vuexProcess.State versionTotalNum: any
  @vuexProcess.Action GET_PROCESS_DATEBASE: any
  @vuexProcess.Action DELETE_VERSION: any
  @vuexProcess.Action CREATE_VERSION: any
  @vuexProcess.Action PREDATA_VERSION: any
  @vuexProcess.Action EDIT_VERSION: any
  @vuexProcess.Action GET_VERSION: any

  sixId: number = 0
  sixSelect: any = {}
  sixShow: boolean = true
  addShow: boolean = false

  /*
  sixData: any[] = [
    {
      versionId: '61'
    },
    {
      versionId: '62'
    },
    {
      versionId: '64'
    }
  ]
  */

  delProcess(process) {
    this.$alert(`您确定删除[${process.versionName}]？`, '错误提示', {
      confirmButtonText: '确定',
      type: 'error',
      callback: action => {
        if (action === 'confirm') {
          this.$confirm('此操作将永久删除该数据, 是否继续?', '操作提示', {
            cancelButtonText: '取消',
            confirmButtonText: '确定',
            type: 'warning'
          })
            .then(() => {
              this.deleteSix(process.versionId)
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        }
      }
    })
  }
  async deleteSix(versionId) {
    let result = await this.DELETE_VERSION({ versionId: versionId })
    if (result) {
      this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters })
    }
  }
  createProcess() {
    this.$refs.addFirstDialog.open(false) // 添加工艺版本的第一个对话框（对应后端新增接口）
  }
  editProcess(process) {
    this.preUpdate(process)
  }
  async preUpdate(process) {
    let getdata = await this.PREDATA_VERSION({ versionId: process.versionId })
    let getversion = await this.GET_VERSION({ versionId: process.versionId })

    if (getdata && getversion) {
      // console.log(this.sixSelect.versionName)
      this.$refs.sixadd.openEdit(process.versionId, process.versionName, process.drawingNumber, process.productName)
    }
  }
  // sixSelection(sixSelect: any) {
  //   if (sixSelect.length == 1) {
  //     this.sixId = sixSelect[0].versionId
  //     this.sixSelect = sixSelect[0]
  //     this.addShow = true
  //     this.sixShow = false
  //   } else if (sixSelect.length == 0) {
  //     this.addShow = false
  //     this.sixShow = true
  //   } else {
  //     this.addShow = true
  //     this.sixShow = true
  //     this.sixId = 0
  //   }
  // }
  async sixDoubleClick(row) {
    let result = await this.GET_VERSION({ versionId: row.versionId })
    //this.GET_PROCESS_DETAIL({ id: row.versionId })
    if (result) {
      this.$refs.dialog.getData(row.drawingNumber, row.productName, row.number)
      this.$refs.dialog.open(false)
    }
  }

  //工艺版本库end

  selected: boolean = false
  singleSelected: boolean = false
  selection: any[] = []
  value1: string = ''
  s1: string = 's1'
  s2: string = 's2'

  clear() {
    this.queryProductionFilters = {
      // 工艺审批数据
      drawingNumber: '',
      productName: '',
      noticeNumber: '',
      state: '工艺审批',
      type: '',
      page: 1,
      pageSize: 20
    }
    this.queryProcessVersionFilters = {
      // 产品工艺库
      drawingNumber: '',
      page: 1,
      pageSize: 20
    }
    this.threeSearch = {
      // 返修处理
      dispatchFormNumber: '',
      processName: '',
      state: '',
      page: 1,
      pageSize: 20
    }
    this.queryToolingProductFilters = {
      // 工装产品
      drawingNumber: '',
      productName: '',
      state: '',
      page: 1,
      pageSize: 1000
    }
  }

  onUpdateDesignData(type) {
    // 一旦设计了工艺表，就更新对应的产品列表
    switch (type) {
      case '产品通知':
        this.getProductList(this.thisNoticeId)
        break
      case '工装品':
        this.queryToolingProduct()
        break
      case '返修品':
        break
    }
  }

  changeTab(tab, event) {
    if (tab.name == 'first') {
      this.GET_PROCESS_INDEX({ ...this.queryProductionFilters }) // 工艺审批
    } else if (tab.name == 'second') {
      this.GET_PROCESS_NOTICE() //产品通知
      this.noticeInfo = {}
      this.noticeDetail = []
    } else if (tab.name == 'third') {
    } else if (tab.name == 'fourth') {
      this.GET_TOOL_LIST({ ...this.queryToolingProductFilters }) //工装
    } else if (tab.name == 'fifth') {
    } else if (tab.name == 'sixth') {
      this.GET_PROCESS_DATEBASE({ ...this.queryProcessVersionFilters }) //版本工艺库
    }
  }
}
</script>

<style lang="scss" scoped>
.total {
  float: left;
  // display: inline;
  border: 1px solid #ccc;
  margin-right: 30px;
  .total_title {
    width: 200px;
    color: #000;
    height: 260px;
    line-height: 30px;
    text-align: center;
    .text {
      font-size: 18px;
      font-weight: bold;
      margin: 0 5px;
      color: #000;
    }
  }

  &:hover {
    color: #000;
    background: #fff;
  }
}
.s1 {
  display: none;
}
.s2 {
  height: 100px;
  display: none;
}

//通知单滚动
.notice-box {
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling: touch;
}

.notice-item {
  height: 270px;
}
.breadcrumb{
      height: 25px;
      width: 100%;
      border:none;
    }

/*隐藏掉滚动条*/
.notice-box::-webkit-scrollbar {
  display: none;
}

.layout .operation {
  overflow-x: auto;
}
.el-tabs {
  padding: 0 20px;
  margin: 0px 10px 0;
  border: 1px solid #e4e7ed;
  background-color: #fff;
  .el-tabs__content {
    min-width: 1200px;
  }
}
</style>